<template>
  <div class="index-main">
    <!-- {{ $root.nav.map[$root.com]?.name }} com-server index-main -->

    <div @mousedown="startResize" class="resizer">
      <div class="resizer-control">
        <div class="bar">
          <div class="l"></div>
          <div class="t"></div>
          <div class="r"></div>
          <div class="b"></div>
        </div>
        <div class="corner">
          <div class="lt"></div>
          <div class="rt"></div>
          <div class="rb"></div>
          <div class="lb"></div>
        </div>
      </div>

      <div class="flex-v">
        <div class="drag-bar">
          <div class="auto-flex">
            <i class="glyphicon glyphicon-play"></i>
            <strong>执行SQL</strong>
          </div>
          <div class="resizer-close">
            <i class="glyphicon glyphicon-remove"></i>
          </div>
        </div>
        <div class="auto-flex">
          <div class="space">
            <ul>
              <li v-for="n in 100">{{n}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index-main',
  data() {
    return {}
  },
  computed: {
    r() {
      return this.$root.router
    }
  },
  watch: {},
  methods: {
    startResize(e) {
      const {clientX: x1, clientY: y1} = e
      const el = e.target.closest('.resizer')
      const target = e.target.closest('.drag-bar, .resizer-control')
      if (!target) return;

      e.preventDefault()
      const ox = el.offsetLeft
      const oy = el.offsetTop
      const ow = el.offsetWidth
      const oh = el.offsetHeight
      const isResize = target.classList.contains('resizer-control')
      const className = e.target.className
      const mapDir = {
        l: 'lw',
        t: 'th',
        r: 'w',
        b: 'h',
        lt: 'ltwh',
        rt: 'twh',
        rb: 'wh',
        lb: 'lwh',
      }
      const mapAttr = {
        l: 'left',
        t: 'top',
        w: 'width',
        h: 'height',
      }
      Object.keys(mapDir).map(k => mapDir[k] = mapDir[k].split(''))

      document.onmousemove = (e) => {
        const {clientX: x2, clientY: y2} = e
        const disX = x2 - x1
        const disY = y2 - y1

        if (isResize) {
          const isL = className.indexOf('l') > -1
          const isT = className.indexOf('t') > -1
          const o = {
            l: ox + disX,
            t: oy + disY,
            w: ow + disX * (isL ? -1 : 1),
            h: oh + disY * (isT ? -1 : 1),
          }

          if (o.l < 0) {
            if (isL) o.w = ox + ow
            o.l = 0
          }

          if (o.t < 0) {
            if (isT) o.h = oy + oh
            o.t = 0
          }

          if (o.w < 300) {
            if (isL) o.l = ox + ow - 300;
            o.w = 300
          }

          if (o.h < 300) {
            if (isT) o.t = oy + oh - 300;
            o.h = 300
          }

          mapDir[className].forEach(k => el.style[mapAttr[k]] = o[k] + 'px')
        } else {
          let x = ox + disX
          let y = oy + disY

          if (x < 0) x = 0
          if (y < 0) y = 0

          el.style.left = x + 'px'
          el.style.top = y + 'px'
        }
      }

      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  },
  async mounted() {
    // await this.lsData()
  }
}
</script>

<style lang="less" scoped>
.index-main {
  height: 100%;
  background: #aaa;
}

.resizer {
  width: 400px; height: 400px;
  position: absolute; left: 200px; top: 100px;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 0 1em rgba(0, 0, 0, .3);
  background: #fff;
  .resizer-control {
    .bar {
      & > div {
        position: absolute; z-index: 2;
        // background: rgba(0, 255, 0, .5);
        &.l {width: 6px; height: 100%; left: 0; top: 0; cursor: w-resize;}
        &.t {width: 100%; height: 6px; left: 0; top: 0; cursor: n-resize;}
        &.r {width: 6px; height: 100%; right: 0; top: 0; cursor: e-resize;}
        &.b {width: 100%; height: 6px; left: 0; bottom: 0; cursor: s-resize;}
      }
    }
    .corner {
      & > div {
        width: 12px; height: 12px;
        // background: rgba(255, 0, 0, .5);
        position: absolute; z-index: 2;
        &.lt {left: 0; top: 0; cursor: nw-resize;}
        &.rt {right: 0; top: 0; cursor: ne-resize;}
        &.rb {right: 0; bottom: 0; cursor: se-resize;}
        &.lb {left: 0; bottom: 0; cursor: sw-resize;}
      }
    }
  }
  .drag-bar {
    display: flex; background: #eee; cursor: move;
    line-height: 40px;
    padding: 0 0 0 1em;
    user-select: none;
    border-bottom: 1px solid #ddd;
    & > .auto-flex {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .resizer-close {
      padding: 0 1em;
    }
  }
}
</style>